<template>
  <div class="px-4 pb-10">
    <!-- 加载状态 - 替换为骨架屏 -->
    <div v-if="loading" class="playlist-skeleton">
      <!-- 第一个骨架卡片 -->
      <div class="bg-gray-900 rounded-lg p-4 mb-4">
        <div class="flex items-center mb-3 justify-between">
          <div class="skeleton-text-title-dark"></div>
          <div class="skeleton-text-more-dark"></div>
        </div>

        <div class="overflow-x-auto scrollbar-hide">
          <div class="flex space-x-3 py-1" style="width: max-content; min-width: 100%">
            <div v-for="i in 5" :key="i" class="flex-shrink-0 w-20">
              <div class="aspect-[4/5] skeleton-img-card-dark rounded-lg mb-2"></div>
              <div class="skeleton-text-mini-dark"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二个骨架卡片 -->
      <div class="bg-gray-900 rounded-lg p-4 mb-4">
        <div class="flex items-center mb-3 justify-between">
          <div class="skeleton-text-title-dark"></div>
          <div class="skeleton-text-more-dark"></div>
        </div>

        <div class="overflow-x-auto scrollbar-hide">
          <div class="flex space-x-3 py-1" style="width: max-content; min-width: 100%">
            <div v-for="i in 5" :key="i" class="flex-shrink-0 w-20">
              <div class="aspect-[4/5] skeleton-img-card-dark rounded-lg mb-2"></div>
              <div class="skeleton-text-mini-dark"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="cateList.length === 0" class="empty-state">
      <i class="far fa-folder-open empty-icon"></i>
      <p class="empty-text">暂无剧单数据</p>
    </div>

    <!-- 剧单列表 -->
    <div
      v-else
      class="bg-gray-900 rounded-lg p-4 mb-4"
      v-for="(category, index) in cateList"
      :key="category.categoryId"
    >
      <!-- 卡片标题 -->
      <div class="flex items-center mb-2 justify-between">
        <div>
          <i class="fas fa-list text-white mr-2"></i>
          <span class="text-white font-medium">{{ category.categoryDescription }}</span>
          <i class="fas fa-fire text-yellow-400 ml-1" v-if="index < 2"></i>
          <span class="text-white ml-1" v-if="index < 2">进站必看</span>
        </div>

        <div class="text-xs" @click="toggleMore(category)">
          <span>更多</span>
          <i class="fa-solid fa-angle-right"></i>
        </div>
      </div>

      <div class="overflow-x-auto scrollbar-hide">
        <div class="flex space-x-3 py-1" style="width: max-content; min-width: 100%">
          <div
            v-for="drama in category.dramas"
            :key="drama.id"
            class="flex-shrink-0 w-20 cursor-pointer"
            @click="handleDramaClick(drama)"
          >
            <div
              class="aspect-[4/5] bg-gray-800 rounded-lg mb-2 relative overflow-hidden hover:opacity-80 transition-opacity"
            >
              <img :src="drama.cover" class="w-full h-full object-cover" alt="剧集" />
              <div class="absolute bottom-1 right-1 bg-black bg-opacity-60 text-xs px-1 rounded text-white">
                全{{ drama.totalEpisodes }}集
              </div>
            </div>
            <p class="text-xs text-white line-clamp-2 leading-tight ellipsis">{{ drama.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Toast提示 -->
    <div v-if="showToast" class="toast-message">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { reqCategoryDramas } from '@/apis/video'

// 路由实例
const router = useRouter()

// 剧单数据
const cateList = ref([])
// 加载状态
const loading = ref(true)
// 提示消息
const toastMessage = ref('')
const showToast = ref(false)

// 显示提示消息
const showToastMessage = (message) => {
  toastMessage.value = message
  showToast.value = true
  setTimeout(() => {
    showToast.value = false
  }, 2000)
}

// 处理剧集点击
const handleDramaClick = (drama) => {
  console.log('点击剧单剧集:', drama.title, 'ID:', drama.id)

  // 从第一集开始观看
  const episodeIndex = 0

  // 如果剧集有videos数据，直接传递
  if (drama.videos && drama.videos.length > 0) {
    router.push({
      name: 'Player',
      params: { dramaId: drama.id }
    })
  } else {
    // 否则只传递dramaId和episodeIndex，让播放页面自己获取数据
    router.push({
      name: 'Player',
      params: { dramaId: drama.id }
    })
  }
}

const toggleMore = (category) => {
  console.log('点击更多分类:', category.categoryId)
  // 这里可以实现跳转到分类详情页或加载更多内容的逻辑
}

// 获取分类剧集数据
const getCategoryDramas = async () => {
  try {
    loading.value = true
    // 获取第1页的10个分类，每个分类10部电视剧
    const response = await reqCategoryDramas({ page: 1, pageSize: 10, dramaCount: 10 })
    const { categories } = response.data

    console.log('分类电视剧集合:', categories)

    cateList.value = categories || []

    if (!categories || categories.length === 0) {
      showToastMessage('暂无剧单数据')
    }
  } catch (error) {
    console.error('❌ 获取分类电视剧集合失败:', error)
    showToastMessage('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(() => {
  getCategoryDramas()
})
</script>

<style scoped>
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* 文本截断 - 限制为两行 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* 确保横向滚动在移动端正常工作 */
.overflow-x-auto {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
  height: 30vh;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 1rem;
}

.loading-text {
  color: #d1d5db;
  font-size: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 空数据状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
  color: #9ca3af;
  height: 30vh;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #6b7280;
}

.empty-text {
  font-size: 1rem;
  color: #9ca3af;
}

/* Toast提示样式 */
.toast-message {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  z-index: 50;
}

/* 骨架屏样式 - 深色主题 */
.playlist-skeleton {
  animation: fadeIn 0.3s ease-in;
}

.skeleton-text-title-dark {
  height: 20px;
  width: 120px;
  border-radius: 4px;
  background: linear-gradient(110deg, #2a2a2a 30%, #3a3a3a 50%, #2a2a2a 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text-more-dark {
  height: 16px;
  width: 50px;
  border-radius: 4px;
  background: linear-gradient(110deg, #2a2a2a 30%, #3a3a3a 50%, #2a2a2a 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-img-card-dark {
  width: 100%;
  background: linear-gradient(110deg, #2a2a2a 30%, #3a3a3a 50%, #2a2a2a 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text-mini-dark {
  height: 12px;
  width: 90%;
  margin-top: 4px;
  border-radius: 4px;
  background: linear-gradient(110deg, #2a2a2a 30%, #3a3a3a 50%, #2a2a2a 70%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* 优化触摸滚动体验 */
@media (hover: none) and (pointer: coarse) {
  .overflow-x-auto {
    scroll-snap-type: x mandatory;
  }
}
</style>
